<template>
  <div class="assess-rules">
    <div class="header-rules">
      <i class="el-icon-arrow-left back-icon" @click="backFn" />

      <div class="right-wrap">
        <div class="rule-title">{{ruleDetailId ? '规则镜像' : '考评规则设置'}}</div>
        <div class="rule-desc">专班</div>
      </div>
    </div>

    <div class="body-rules">
      <el-form ref="form" :inline="true" :model="form" :rules="formRules">
        <div class="line-item">
          1、按照单体项目规模档次分为：
          <el-form-item prop="grade">
            <el-input
              class="custom-ipt"
              type="number"
              v-model.number="form.grade"
              max="8"
              :disabled="Boolean(ruleDetailId)"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 8 ? 8 : value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >档次，每增加<el-form-item prop="gradeMoney">
            <el-input
              :disabled="Boolean(ruleDetailId)"
              class="custom-ipt"
              type="input"
              v-model="form.gradeMoney"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            ></el-input> </el-form-item
          >亿，多加<el-form-item prop="gradeFraction">
            <el-input
              :disabled="Boolean(ruleDetailId)"
              class="custom-ipt"
              type="input"
              v-model="form.gradeFraction"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="table-wrap">
          <div class="table-item table-head">
            <div class="area"></div>
            <div class="agency p-6">签约</div>
            <div class="not-landed p-6">签约未落地(1年)</div>
            <div class="be-done p-6">落地</div>
            <div class="product p-6">投产</div>
          </div>
          <div
            class="table-item area-list"
            v-for="(item, index) in form.areaList"
            :key="index"
          >
            <div class="area">
              <el-form-item
                :prop="'areaList.' + index + '.intervalOne'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateIntervalOne(index, value, callback),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                 :disabled="Boolean(ruleDetailId)"
                  class="custom-ipt"
                  type="input"
                  v-model="item.intervalOne"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                ></el-input> </el-form-item
              >-<el-form-item
                :prop="'areaList.' + index + '.intervalTwo'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateIntervalTwo(index, value, callback),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  :disabled="Boolean(ruleDetailId)"
                  class="custom-ipt"
                  type="input"
                  v-model="item.intervalTwo"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                ></el-input> </el-form-item
              >亿
            </div>
            <div class="agency">
              <el-form-item
                :prop="'areaList.' + index + '.signing'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateArea(index, value, callback, 'signing'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  :disabled="Boolean(ruleDetailId)"
                  class="custom-ipt"
                  type="input"
                  v-model="item.signing"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item
              >分
            </div>
            <div class="not-landed">
              <el-form-item
                :prop="'areaList.' + index + '.signingOut'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateArea(index, value, callback, 'signingOut'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  class="custom-ipt"
                  type="input"
                  :disabled="Boolean(ruleDetailId)"
                  v-model="item.signingOut"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item
              >分
            </div>
            <div class="be-done">
              <el-form-item
                :prop="'areaList.' + index + '.signingIn'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateArea(index, value, callback, 'signingIn'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  class="custom-ipt"
                  type="input"
                  :disabled="Boolean(ruleDetailId)"
                  v-model="item.signingIn"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item
              >分
            </div>
            <div class="product">
              <el-form-item
                :prop="'areaList.' + index + '.produce'"
                :rules="[
                  { required: true, message: ' ', trigger: 'blur' },
                  {
                    validator: (rule, value, callback) => validateArea(index, value, callback, 'produce'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  class="custom-ipt"
                  type="input"
                  :disabled="Boolean(ruleDetailId)"
                  v-model="item.produce"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item
              >分
            </div>
          </div>
        </div>

        <div class="line-item">
          2、每季度内，投资规模0.5亿元以上的招商引资项目签约数量为0的，扣<el-form-item
            prop="quarter"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.quarter"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          3、签约项目中有实际使用外资（商务部口径）并实际到位的，每100万美元加<el-form-item
            prop="foreignFraction"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.foreignFraction"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          4、提供有效招商信息并取得实际成效的，每条加<el-form-item
            prop="investment"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.investment"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          5、招商信息为外资项目并取得实际成效的，每条加<el-form-item
            prop="foreignInvestment"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.foreignInvestment"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          6、邀请世界和国内500强企业、行业领军企业、中央企业主要负责人来丛台区考察，加<el-form-item
            prop="investigate"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.investigate"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          7、邀请区委、区政府主要领导赴总部拜访并与主要负责人对接洽谈，加<el-form-item
            prop="speak"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.speak"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          8、引进重大招商引资项目（50亿元以上内资项目或者3000万美元以上外资项目），在原有加分基础上再加<el-form-item
            prop="major"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.major"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          9、招引企业总部、知名品牌、头部企业等入驻楼宇加分
        </div>
        <div class="line-item">
          <span class="transparent-txt">9、</span>超2000平方米<el-form-item
            prop="squareOne"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.squareOne"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          <span class="transparent-txt">9、</span>超3000平方米<el-form-item
            prop="squareTwo"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.squareTwo"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          <span class="transparent-txt">9、</span>超5000平方米<el-form-item
            prop="squareThree"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.squareThree"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          <span class="transparent-txt">9、</span>超10000平方米<el-form-item
            prop="squareFour"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.squareFour"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>

        <div class="line-item">
          10、根据自身特色在邯郸市外举办专场招商推介会并取得成果的，每举办一场加<el-form-item
            prop="recommend"
          >
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.recommend"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
        <div class="line-item">
          11、区领导带队外出招商的，每外出一次加<el-form-item prop="goOut">
            <el-input
              class="custom-ipt"
              type="input"
              :disabled="Boolean(ruleDetailId)"
              v-model="form.goOut"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            ></el-input> </el-form-item
          >分
        </div>
      </el-form>
        
      <div class="submit-box">
        <el-button @click="backFn" v-if="ruleDetailId" class="btn">返回</el-button>
        <el-button type="primary" @click="submitForm" class="btn" v-else>保存</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import assessApi from '@/api/investment/assess'

export default {
  name: "assessRule",
  props: ['ruleDetailId'],
  data() {
    return {
      form: {
        grade: 1,
        gradeMoney: "",
        gradeFraction: "",
        quarter: "",
        foreignFraction: "",
        investment: "",
        foreignInvestment: "",
        investigate: "",
        speak: "",
        major: "",
        squareOne: "",
        squareTwo: "",
        squareThree: "",
        squareFour: "",
        recommend: "",
        goOut: "",
        areaList: [
          {
            intervalOne: "",
            intervalTwo: "",
            signing: "",
            signingOut: "",
            signingIn: "",
            produce: "",
          },
        ],
      },
      formRules: {
        grade: [{ required: true, message: " ", trigger: "blur" }],
        gradeMoney: [{ required: true, message: " ", trigger: "blur" }],
        gradeFraction: [{ required: true, message: " ", trigger: "blur" }],
        quarter: [{ required: true, message: " ", trigger: "blur" }],
        foreignFraction: [{ required: true, message: " ", trigger: "blur" }],
        investment: [{ required: true, message: " ", trigger: "blur" }],
        foreignInvestment: [{ required: true, message: " ", trigger: "blur" }],
        investigate: [{ required: true, message: " ", trigger: "blur" }],
        speak: [{ required: true, message: " ", trigger: "blur" }],
        major: [{ required: true, message: " ", trigger: "blur" }],
        squareOne: [{ required: true, message: " ", trigger: "blur" }],
        squareTwo: [{ required: true, message: " ", trigger: "blur" }],
        squareThree: [{ required: true, message: " ", trigger: "blur" }],
        squareFour: [{ required: true, message: " ", trigger: "blur" }],
        recommend: [{ required: true, message: " ", trigger: "blur" }],
        goOut: [{ required: true, message: " ", trigger: "blur" }],
      },
      isEdit: false
    }
  },
  computed: {
    gradeNumber() {
      return this.form.grade
    },
  },
  watch: {
    gradeNumber: {
      handler(newVal) {
        if (newVal) {
          let oldLength = this.form.areaList.length;
          this.form.areaList.length = newVal;

          if (newVal > oldLength) {
            for (let i = oldLength; i < newVal; i++) {
              this.$set(this.form.areaList, i, {
                intervalOne: "",
                intervalTwo: "",
                signing: "",
                signingOut: "",
                signingIn: "",
                produce: "",
              });
            }
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.ruleDetailId ? this.getOneRule() : this.getList()
  },
  methods: {
    async getList() {
      const {data} = await assessApi.getOneGroupScoringRules()
      
      if(data.grade) {
        this.form = {...data, areaList: data.data}
        this.isEdit = true
      }
    },

    async getOneRule() {
      const {data} = await assessApi.getAssessmentLog({id: this.ruleDetailId})
      console.log(789, data)
      if(data.grade) {
        this.form = {...data, areaList: data.data}
      }
    },
    backFn() {
      this.$confirm("返回上一级，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("backFn");
        })
        .catch(() => {});
    },
    keyupFn(item) {
      console.log(item);
    },
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            if(this.isEdit) {
              const {data} = await assessApi.updataGroupScoringRules({
                ...this.form,
                data: this.form.areaList
              })
              this.$message({
                message: "保存成功",
                type: "success",
              })
              setTimeout(() => {
                this.$emit("backFn")
              }, 300)
             
            } else {
              const {data} = await assessApi.saveGroupScoringRules({
                ...this.form,
                data: this.form.areaList
              })
              this.$message({
                message: "保存成功",
                type: "success",
              })
              setTimeout(() => {
                this.$emit("backFn")
              }, 300)
            }
          } catch(err) {
            this.$message({
              message: "保存表单失败",
              type: "warning",
            })
          }
        } else {
          this.$message({
            message: "请填写完整且正确的表单信息",
            type: "warning",
          })

          return false
        }
      })
    },
    validateIntervalOne(index, value, callback) {
      if (index > 0) {
        const prevValue = this.form.areaList[index - 1].intervalTwo
        if (value < prevValue) {
          callback(new Error('需大于上一档金额'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    validateIntervalTwo(index, value, callback) {
      const prevValue = this.form.areaList[index].intervalOne

      if (value <= prevValue) {
        callback(new Error('需大于开始金额'))
      } else {
        callback()
      }
    },
    validateArea(index, value, callback, key) {
      if (index > 0) {
        const prevValue = this.form.areaList[index - 1][key]
        if (value <= prevValue) {
          callback(new Error('需大于上一档次分数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    
  },
}
</script>

<style lang="scss">
.assess-rules {
  .el-input--medium .el-input__inner {
    text-align: center;
  }
  .el-form--inline .el-form-item {
    margin-right: 0;
  }
  .el-form-item__error {
    padding-left: 6px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>

<style lang="scss" scoped>
.assess-rules {
  .custom-ipt {
    width: 60px;
    height: 32px;
    margin: 0 6px;
    text-align: center !important;
  }
  .transparent-txt {
    color: transparent;
    user-select: none;
  }
  .header-rules {
    display: flex;
    align-items: center;
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 6px 0;
    .back-icon {
      padding: 0 16px;
      cursor: pointer;
      color: #333;
    }
    .rule-desc {
      color: #999;
      font-weight: 400;
      font-size: 12px;
    }
  }
  .body-rules {
    margin: 16px;
    padding: 32px 16px 24px 182px;
    background-color: #fff;
    font-size: 14px;
    line-height: 21px;
    color: #333;
  }
  .table-head {
    margin-bottom: 14px;
  }
  .line-item {
    display: flex;
    align-items: center;
    margin: 16px 0;
  }
  .table-wrap {
    .p-6 {
      padding-left: 6px;
      font-weight: 600;
    }
    .table-item {
      display: flex;
      align-items: center;
      .area {
        width: 203px;
      }
      .agency {
        width: 110px;
      }
      .not-landed {
        width: 140px;
      }
      .be-done {
        width: 110px;
      }
      .product {
        width: 110px;
      }
    }
  }
  .area-list {
    margin-bottom: 16px;
    line-height: 36px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .submit-box {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    .btn {
      margin-left: -182px;
    }
  }
}
</style>
